<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page
	import="org.springframework.security.core.AuthenticationException"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="pl">
<head>
<meta charset="utf-8" />

<title>Login</title>

<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/static/css/logreg-style.css />
<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/static/css/logreg-form.css />
<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/static/css/jquery-ui-1.8.14.custom.css />
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/static/javascript/jquery-1.6.2.min.js></script>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/static/javascript/jquery-1.6.2.min.js></script>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/static/javascript/jquery-ui-1.8.16.custom.min.js></script>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/static/javascript/jquery.validate.min.js></script>

<script type="text/javascript">
	jQuery.validator.addMethod("stareHaslo", function(value, element) {
		stare = "${oldPassword}";
		return value == stare;
	}, "Podaj stare haslo!");

	function submitForm() {

		jQuery("form").submit();

	}
	jQuery(document).ready(function() {
		jQuery("#settingsForm").validate({
			rules : {
				email : {
					email : true,
					required : true
				},
				pass1 : {
					required : true
				},
				oldPass : {
					stareHaslo : true
				},
				pass2 : {
					required   : true,
					equalTo : "#pass1"
				},
				phone : {
					required : true
				},
			},
			messages : {
				email : {
					required : "Pole jest wymagane",
					email : "Wprowadz poprawny adres e-mail."
				},
				pass1 : {
					required : "Pole jest wymagane"
				},
				pass2 : {
					required : "Pole jest wymagane",
					equalTo : "Wprowadz takie samo haslo."
				},
				phone : {
					required : "Wprowadz	 numer telefonu."
				}
			},
			success : function(label) {
				label.html("&nbsp;").addClass("sprawdzony");
			},
			error : function(label) {
				alert("label");
			}
		});
	});
</script>


<style type="text/css">
.promoteZ {
	z-index: 20036 !important; /* Dialog z-index is 1006*/
}

label {
	width: 200px !important;
	float: left;
	display: inline; 
	clear:none;
}

label.error {
	margin: 0;
	margin-left:10px !important;
	float: left;
	background:none;
	color: red;
	padding-left: 15px;
	vertical-align: top;
}

p {
	clear: both;
}

label.sprawdzony {
	float: left;
	background: url("../static/images/sprawdzony.png") no-repeat 0px 0px;
	margin-left: 5px;
}
</style>
</head>
<body>


	<div id="header">

		<form:form class="cmxform" commandName="settingsForm"
			id="settingsForm" method="post" action="changeSettings.do"
			style="width:700px;">
			<fieldset>
				<legend>Ustawienia</legend>
				<p>
					<form:label path="oldPass">Stare haslo</form:label>
					<form:password path="oldPass" />
				</p>
				<p>
					<form:label path="pass1">Nowe haslo</form:label>
					<form:password path="pass1" />
				</p>
				<p>
					<form:label path="pass2">Powtorz haslo</form:label>
					<form:password path="pass2" />
				</p>
				<p>
					<form:label path="email">Email</form:label>
					<form:input path="email" />
				</p>
				<p>
					<form:label path="phone">Telefon</form:label>
					<form:input path="phone"
						onkeyup="this.value=this.value.replace(/\D/g,'')"
						required="required" number="true" />
				</p>
				<label style="color: red;">${message}</label><input type="submit"
					value="Zapisz" />
				<br />
				<p><span style="float:right;">	
				<a href="start.do"><input type="button" value="Powrót" style="clear:both; text-decoration:none; background-color: #4F709F !important; color: white; text-shadow: 1px 1px 1px #333333;"/></a>
				</span>
				</p>
			</fieldset>

		</form:form>

	</div>


	<div id="masthead"
		style="background: url('../static/images/images1.jpg') no-repeat center; height: 400px; margin: auto;">
	</div>

	<div id="footer">
		<p>i to wszystko na razie jesli chodzi o te strone :)</p>
	</div>
</body>
</html>